<template>
  <div class="col-3">
    <el-button @click="addUser" type="primary">+添加团队人员</el-button>
    <el-dialog width="450px" :title="title" @close="close" v-model="dialogVisible">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          {{ title }}
        </span>
      </template>
      <el-form size="default" :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择用户">
          <el-avatar :size="48" :src="circleUrl" @click="dialogVisible2 = true"></el-avatar>
          <span class="username">{{ userName }}</span>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio-group v-model="formdata.isAdmin">
            <el-radio :value="2">教师</el-radio>
            <el-radio :value="1">管理员</el-radio>
            <el-radio :value="0">团员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择团队组">
          <el-select v-model="formdata.teamusergroupid" placeholder="请选择">
            <el-option v-for="item in group" :key="item.ID" :label="item.name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 成员选择弹窗 -->
    <el-dialog width="80vw" title="用户" v-model="dialogVisible2">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          选择用户
        </span>
      </template>
      <User v-bind="{ userhandleCurrentChange, selectarr }"></User>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { computed, reactive, ref, toRefs, watch } from "vue";
import { asyncadminaddteamuser } from "../../../api";
import study from "../../../mysql_interface/studycodemodel";
import User from "../User/index.vue";

const initialUserInfo = {
  ID: undefined,
  name: '',
  headportrait: '',
  // 其他需要初始化的字段...
};

const p = defineProps<{
  ID?: number,
  teamid?: number,
  selectedUser?: study.Iteamuser,
  create: Function,
  group: any[],
  start: Function,
  close: Function,
}>()

const formdata = reactive<study.Iteamuser>({ ...p.selectedUser });
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);

// 添加成员-选中的用户id
const userinfo = reactive<study.Iuser>({});
const circleUrl = computed(() => {
  return (p.ID ? formdata?.user?.headportrait : userinfo.headportrait) || ""
});
const title = computed(() => {
  return p.ID ? "修改成员" : "添加成员";
});
const userName = computed(() => {
  const isAdd = !p.ID
  let name = formdata.username ? formdata.username : formdata.user?.name;
  if (isAdd) {
    name = userinfo.name
  }
  return name
});

watch(() => p.selectedUser, () => {
  Object.assign(formdata, p.selectedUser);
});

async function submit() {
  if (userinfo.ID) {
    formdata.userid = userinfo.ID;
  }
  formdata.jurisdiction = "0";
  formdata.teamid = Number(p.teamid);
  try {
    await asyncadminaddteamuser(formdata);
    ElMessage.success(title.value + "成功");
    dialogVisible.value = false;
    if (p.start) p.start();
  } catch (e: any) {
    ElMessage.error(e);
  }
}
async function addUser() {
  p.create();
  dialogVisible.value = true;
}
function resetUserInfo() {
  Object.assign(userinfo, initialUserInfo);
}
function close() {
  resetUserInfo();  // 重置 userinfo
  dialogVisible.value = false;
  p.close();
}


function userhandleCurrentChange(data: study.Iuser) {
  Object.assign(userinfo, toRefs(data));
  dialogVisible2.value = false;
  // console.log("选中了要添加进入团队的成员=>", data, userinfo)
}
const selectarr: Array<keyof study.Iuser> = ["name", "ID"];

function setdialogVisible(t: boolean) {
  dialogVisible.value = t;
}

defineExpose({
  setdialogVisible
})

</script>

<style scoped>
.username {
  margin-left: 20px;
}
</style>